<template>
  <view class="search">
    <!-- 1 搜索框 -->
    <u-search
    
      :action-style="{
        backgroundColor: '#ea4350',
        color: '#fff',
        height: '64rpx',
        lineHeight: '64rpx',
        borderRadius: '10rpx',
      }"
       @change="handleGoodsNameChange"
       @custom="handleGoPage"
       focus
       clearabled
    ></u-search>

    <!-- 2 商品 关键字 推荐列表 -->
      <navigator
        class="search-item"
        v-for="item in keywords"
        :key="item.goods_id"
        :url="`/pages/goods_list/goods_list?query=${item.goods_name}`"
        >{{ item.goods_name }}</navigator
      >
  </view>
</template>

<script>
export default {
    data() {
    return {
      // 商品关键字列表
      keywords: [],
    };
  },
  methods: {
    // 搜索框输入时触发
    handleGoodsNameChange(value) {
      //  根据商品名称 返回 对应 推荐关键字
      // this.getGoodsQsearch(value);

      // 防抖
      // this.$u.debounce(真正要做的业务对应的函数, 间隔多少时间单位是毫秒)

      //  this.getGoodsQsearch(value);// 正确的写法
      // this.$u.debounce(this.getGoodsQsearch, 500); // 修改了写法
      // this.$u.debounce(this.getGoodsQsearch(value), 500); // 错误的写法！！

      // 正确写法一  回调函数    bind
      // this.$u.debounce(this.getGoodsQsearch.bind(this, value), 500);

      //  正确写法二
      this.$u.debounce(() => {
        this.getGoodsQsearch(value);
      }, 500);
    },
    // 根据商品名称 返回 对应 推荐关键字
    // /goods/qsearch
    async getGoodsQsearch(query) {
     

        if (query.trim()) {
        const result = await this.$u.get("/goods/qsearch", { query });
        this.keywords = result.message;
        console.log(this.keywords ,'成功搜索');
      } else {
         console.log("空字符串 不用发请求 顺便清空数据");
        
        this.keywords = [];
      }
    },
        // 点击 搜索框右侧 按钮时候 触发
 async handleGoPage(value) {
      //获取到这个苹果筛选出来的所有东西
      //然后所有在所有数据中映射出来
      console.log(value);

     
      uni.navigateTo({ url: `/pages/goods_list/goods_list?query=${value}` });
    },
  },
};
</script>

<style lang="scss">

.search-list {
  background-color: #fff;

  .search-item {
    padding: 10rpx;
    border-bottom: 1rpx solid #eee;
  }
}
</style>